import React from 'react';
import {Form, Input, Button, Select, Table, Card, Modal, Popover, Pagination, Row, Col, Icon, Message } from 'antd';
const FormItem = Form.Item;
const confirm = Modal.confirm;
import './../../../assets/css/landlord/addRoom.css'
let List = React.createClass({

  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    let current = this.props.location.state ? this.props.location.state.currentPage : 1;
    console.log(current)
    return {
      data: [],
      visible: false,
      dataBox: null,
      total: 0,
      currentPage: current,
      pageSize: 12
    }
  },

  componentDidMount() {
    this.handleSearch();
  },

  fetch(param) {
    let params = Object.assign({}, {pageSize: this.state.pageSize, currentPage: 1}, param);
    let _me = this;
    Utils.sendAjax({
      url: '/room/decorate/list',
      data: JSON.stringify(params),
      type: 'json',
      callback: function(result) {
        if (result.code == '200') {
          _me.setState({
            data: result.data,
            dataBox: _me.renderBox(result.data),
            total: result.page.total
          })
        }
      }
    })
  },

  renderBox(data) {
    if (!data[0]) {
      return (
        <li className="none-data">
          <span><Icon type="frown" />暂无数据...</span>
        </li>
      )
    }

    let boxArr = [];
    let content = (<div style={{color:'#ccc'}}>暂无房间信息,请新增房间~</div>);
    data.forEach( (item) => {
      if(item.roomList.length > 0){
        content = item.roomList.map((item1) => {
            return (
              <Row key={`item1-${item1.id}`} >
                {
                  item1.publishStatus == '1'?(
                    <span>
                      <Col span={5}>
                        <span title={item1.roomName}>{item1.roomName.length > 5 ? `${item1.roomName.slice(0,5)}...`:item1.roomName}</span>
                      </Col>
                      <Col span={3}>{item1.area.toFixed(2)}㎡</Col>
                      <Col span={3} >上架</Col>
                      <Col span={4}>成本:￥<strong>{item1.roomDecorateCost}</strong></Col>
                    </span>
                    ): (
                    <span>
                      <Col span={5} className="line-through">
                        <span title={item1.roomName}>{item1.roomName.length > 5 ? `${item1.roomName.slice(0,5)}...`:item1.roomName}</span>
                      </Col>
                      <Col span={3} className="line-through">{item1.area.toFixed(2)}㎡</Col>
                      <Col span={3} className="line-through">下架</Col>
                      <Col span={5} className="line-through">成本:￥<strong>{item1.roomDecorateCost}</strong></Col>
                    </span>
                  )
                }
                <Col span={8}>
                {
                    item1.status === '3'?
                    <span style={{color: '#a09e9e'}}>已删除</span>:
                    <span>
                      <a href='javascript:;'  onClick={this.handleRoomCost.bind(this, item1)}>消费</a>
                      <span className="ant-divider"></span>
                      <a href='javascript:;'  onClick={this.handleModifyRoom.bind(this, item1)}>修改</a>
                          <span className="ant-divider"></span>
                          <a href='javascript:;'  onClick={this.deleteRoom.bind(this, item1)}>删除</a>
                    </span>
                }
                </Col>
              </Row>
            );

        });
      }else{
        content = (
          <div style={{color:'#ccc'}}>暂无房间信息,请新增房间~</div>
        );

      }
      let rightRoomBox = (
        <div style={{minWidth:350}}>
          {content}
        </div>
      );

      let boxDom = (


        <li className="ul-wrap-li" key={`li-${item.tenementId}`}>
          <Popover placement="right" title="房间信息" content={rightRoomBox} trigger="hover">
            <Card onClick={this.showDetail.bind(this, item)} >
              <p><span >整套</span>&nbsp;<span><strong>{item.area}</strong>㎡</span> &nbsp;&nbsp;&nbsp;
                <span>总成本</span>&nbsp;<span>{item.decorateCost?<strong>￥{item.decorateCost}</strong>:'未装修'}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span className="dec-icon-bg">{item.roomList.length}间</span>
              </p>
              <p>{item.address}</p>
              <Form className="btn-group">
                <FormItem >
                  <Button className="inline-btn" type="ghost" size="small" onClick={this.handleAddRoom.bind(this, item)}>新增房间</Button>
                  <Button className="inline-btn"  type="ghost" size="small" onClick={this.handleCost.bind(this, item)}>消费</Button>
                  <Button className="inline-btn"  type="ghost" size="small" onClick={this.handleHistory.bind(this, item)}>费用历史</Button>
                </FormItem>
              </Form>
            </Card>
          </Popover>
        </li>

      )
      boxArr.push(boxDom)
    })
    return boxArr;
  },

  // 新增房间
  handleAddRoom(record) {
    let params= {id:record.tenementId, currentPage: this.state.currentPage};
    let goPathUrl= '/landlord/houseDecoration/addRoom';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },
  // 房间修改
  handleModifyRoom(record){
    let params= {roomId:record.id, tenementId:record.tenementId, currentPage: this.state.currentPage};
    let goPathUrl= '/landlord/houseDecoration/roomModify';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },

  // 新增房源消费
  handleCost(record) {
    let params= {tenementId:record.tenementId, currentPage: this.state.currentPage};
    let goPathUrl= '/landlord/houseDecoration/cost';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },
  // 新增房间消费
  handleRoomCost(record) {
    let params= {tenementId:record.tenementId,id:record.id, currentPage: this.state.currentPage};
    let goPathUrl= '/landlord/houseDecoration/roomCost';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },

  // 费用历史
  handleHistory(record) {
    let params = {
      record: record,
     currentPage: this.state.currentPage
    };
    let goPathUrl= '/landlord/houseDecoration/historicalCost';
    this.context.router.push({pathname: goPathUrl, state: {...params}});
  },
  deleteRoom(record) {
    let me = this;
     confirm({
              title: '您是否确认要删除这项内容',
        onOk() {
            let id = record.id;
                Utils.sendAjax({
                  url: '/room/decorate/delete',
                  data: JSON.stringify({id: id}),
                  callback: (result)=> {
                    if(result.code == '200'){
                        me.fetch(); 
                        Message.success(result.message)        
                    }else {
                      Message.error(result.message, 10);
                    }
                  }
                })
              },
              onCancel() {},
  });
  },
  handleCancel() {
    this.setState({
      visible: false,
    });
  },

  showDetail() {
    this.setState({
      visible: true,
    });
  },

  handleSearch() {
    this.listRender(this.state.currentPage);
  },

  handleReset() {
    this.props.form.resetFields();
  },

  handlePageChange(current) {
    this.listRender(current);
  },

  //列表渲染
  listRender(current){
    let forms = this.props.form.getFieldsValue();
    let param = Object.assign({}, forms, {currentPage:current});
    this.setState({
      currentPage:current
    });
    this.fetch(param);
  },
  render () {

    const { getFieldProps } = this.props.form;
    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem  label="业主姓名">
              <Input {...getFieldProps('ownerName',{ initialValue: '' }) } placeholder="业主姓名"/>
            </FormItem>
               <FormItem  label="联系电话">
              <Input {...getFieldProps('mobilePhone',{ initialValue: '' }) } placeholder="联系电话"/>
            </FormItem>
            <FormItem  label="房源地址">
              <Input {...getFieldProps('address',{ initialValue: '' }) } placeholder="房源地址"/>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>
              <Button type="default" onClick={this.handleReset} >重置</Button>
            </FormItem>
          </Form>
        </div>
        <ul className="ul-show-card">
          {this.state.dataBox}
        </ul>
        {this.state.data[0] ?
        <div className="box-page">
          <Pagination onChange={this.handlePageChange}
                      current={this.state.currentPage}
                      total={this.state.total}
                      pageSize={this.state.pageSize} />
        </div> : null}

      </div>
    );
  }
});
List = Form.create()(List);
export default List